<!-- 商品行情 -->
<template>
  <div class="price">
    <div class="hade dfsp" style="margin-bottom: 30px">
      <div class="dfsp sizefw">
        <div class="select-item">
          <div
            v-for="(k, i) in TypeList"
            :key="i"
            :class="k.type == FromType ? 'actItem' : 'no-actItem'"
            @click="TypeTap(k.type)"
          >
            {{ t(k.title) }}
          </div>
        </div>
      </div>
    </div>
    <!-- notice -->
    <!-- <div class="notice">
			<img src="/src/style/img/notice.png" alt="">
		</div> -->
    <!-- content -->
    <div class="content dfsp" v-loading="ListLoading">
      <div class="content_l" v-if="FromType == 1">
        <div
          class="item dfsp"
          v-for="(item, index) in marketGoodsList"
          @click="GoDetail(item)"
          :class="item.id == GoDetailId ? 'acitem' : ''"
        >
          <div class="dfsp">
            <img v-if="isup(item) == 2" src="/src/style/img/icon_rise.png" alt="" />
            <img v-else src="/src/style/img/icon_bearish.png" alt="" />
            <p class="size16 sizefw">{{ item.title }}</p>
          </div>
          <div class="itemList">
            <text v-if="item.isopen == 1" class="zhang">{{ t('opening') }}</text>
            <text v-else>{{ t('closed') }}</text>
          </div>
          <text class="size12 itemList">{{ item.procode }}</text>
        </div>
      </div>
      <div class="content_l" v-else>
        <div
          class="item dfsp"
          v-for="(item, index) in marketList"
          @click="GoDetail(item)"
          :class="item.id == GoDetailId ? 'acitem' : ''"
        >
          <div class="dfsp">
            <img v-if="isup(item) == 2" src="/src/style/img/icon_rise.png" alt="" />
            <img v-else src="/src/style/img/icon_bearish.png" alt="" />
            <p class="size16 sizefw">{{ item.title }}</p>
          </div>
          <div class="itemList">
            <text v-if="item.isopen == 1" class="zhang">{{ t('opening') }}</text>
            <text v-else>{{ t('closed') }}</text>
          </div>
          <text class="size12 itemList">{{ item.procode }}</text>
        </div>
      </div>
      <div class="content_r dfsp">
        <chart :FromType="FromType" :GoDetailId="GoDetailId"></chart>
      </div>
    </div>
    <!-- hold -->
    <div class="hold">
      <view class="dfsp holdT">
        <div class="size16 sizefw have-title">{{ t('holdings') }}</div>
        <el-icon color="#1f3a9c" size="20" v-show="hold" @click="hold = !hold">
          <ArrowDown />
        </el-icon>
        <el-icon color="#1f3a9c" size="20" v-show="!hold" @click="hold = !hold">
          <ArrowUp />
        </el-icon>
      </view>
      <el-collapse-transition>
        <div class="holdB" v-show="hold">
          <!-- 期指 -->
          <div
            class="list"
            v-for="(item, index) in setmarketGoodsList"
            :key="index"
            v-if="FromType == 1"
          >
            <div class="item itemT">
              <text>{{ t('orderno') }} : {{ item.orderno }}</text>
              <text>{{ t('orderno') }} : {{ item.orderno }}</text>
            </div>
            <div class="item itemB dfsp">
              <div class="name size16 sizefw">{{ item.ptitle }}</div>
              <div>
                <text>{{ t('type') }}</text>
                <p v-if="item.is_study == 1">{{ t('imitate') }}</p>
                <p v-else>{{ t('transaction') }}</p>
              </div>
              <div>
                <text>{{ t('spotprice') }}</text>
                <p>{{ item.spotprice }}</p>
              </div>
              <div>
                <text>{{ t('min_dump') }}</text>
                <p>{{ item.min_dump }}</p>
              </div>
              <div>
                <text>{{ t('spotsum') }}</text>
                <p>{{ item.spotsum }}</p>
              </div>
              <div>
                <text>{{ t('mouthsum') }}</text>
                <p>{{ item.mouthsum }}</p>
              </div>
              <div>
                <text>{{ t('buyprice') }}</text>
                <p>{{ item.buyprice }}</p>
              </div>
              <div>
                <text>{{ t('sellprice') }}</text>
                <p>{{ item.sellprice }}</p>
              </div>
              <div>
                <text>{{ t('fee') }}</text>
                <p>{{ item.fee }}</p>
              </div>
              <div>
                <text>{{ t('sx_fee') }}</text>
                <p>{{ item.sx_fee }}</p>
              </div>
              <div>
                <text>{{ t('ploss') }}</text>
                <p>{{ item.ploss }}</p>
              </div>
            </div>
          </div>
          <!-- 现冲 -->
          <div
            class="list"
            v-for="(item, index) in setmarketList"
            :key="index"
            v-if="FromType == 2"
          >
            <div class="item itemT">
              <text>{{ t('orderno') }} : {{ item.orderno }}</text>
              <text>{{ t('buytime') }} : {{ item.buytime }}</text>
            </div>
            <div class="item itemB dfsp">
              <div class="name size16 sizefw">{{ item.ptitle }}</div>
              <div>
                <text>{{ t('type') }}</text>
                <p v-if="item.is_study == 1">{{ t('imitate') }}</p>
                <p v-else>{{ t('transaction') }}</p>
              </div>
              <div>
                <text>{{ t('endprofit') }}</text>
                <p>{{ item.endprofit }}S</p>
              </div>
              <div>
                <text>{{ t('buyprice') }}</text>
                <p>{{ item.buyprice }}</p>
              </div>
              <div>
                <text v-if="item.ostaus == '0' || item.ostaus == '2'">{{ t('currentprice') }}</text>
                <text v-else>{{ t('sellingrate') }}</text>
                <p>{{ item.sellprice }}</p>
              </div>
              <div>
                <text>{{ t('fee') }}</text>
                <p>{{ item.fee }}</p>
              </div>
              <div>
                <text>{{ t('sx_fee') }}</text>
                <p>{{ item.sx_fee }}</p>
              </div>
              <div>
                <text>{{ t('ploss') }}</text>
                <p class="zhang" v-if="item.ploss > 0">+{{ item.ploss }}</p>
                <p class="die" v-if="item.ploss < 0">{{ item.ploss }}</p>
                <p v-if="item.ploss == 0 || item.ploss == 0.0">{{ item.ploss }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import chart from './component/chart.vue'
import { useStore } from 'vuex'
const store = useStore() //vuex
import { getToken } from '@/utils/cookies.js'
import { reactive, ref, onMounted, getCurrentInstance, computed, watch } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
const hold = ref(true)
//
const FromType = ref(1)
const TypeList = reactive([
  {
    title: 'FuturesTrading',
    type: 1,
  },
  {
    title: 'Cashtransaction',
    type: 2,
  },
])
//
const Form = {
  account: '',
  password: '',
}
const ruleForm = reactive(Form) //表单
const { proxy } = getCurrentInstance()

// 切换类型
const info = reactive({
  type: 'quotation_goods_list,quotation_list,quotation_goods_detail',
  token: getToken(),
  lang: getToken('Lang') || store.state.Lang,
})
const TypeTap = (type) => {
  FromType.value = type
  if (type == 1) {
    orderGoodsList()
    GoDetailId.value = marketGoodsList.value[0].id
    // console.log(marketGoodsList.value[0].id)
  } else {
    orderList()
    GoDetailId.value = marketList.value[0].id
    // console.log(marketList.value[0].id)
  }
}
//列表 ----------------------------- 类型
const ListLoading = ref(true)
// 现冲
const marketList = computed(() => {
  return store.state.marketList
})
// 期指
const marketGoodsList = computed(() => {
  return store.state.marketGoodsList
})
const isup = (item) => {
  let mony = item.close == null || item.close == '' ? item.open : item.close
  if (item.price > mony) {
    return 2
  } else if (item.price < mony) {
    return 1
  } else {
    return 0
  }
}
// 查看详情
const GoDetailId = ref(1)
const GoDetail = (item) => {
  GoDetailId.value = item.id
}
// 列表 ----------------------------- 订单
const loading = ref(false)
const listdata = ref([])
const page = reactive({
  page: 1,
  page_size: 10,
  ostaus: 1,
})
// 期指
const orderGoodsList = () => {
  loading.value = true
  proxy
    .$post('/mt4/Order/orderGoodsList', page)
    .then((res) => {
      listdata.value = res.data
      loading.value = false
    })
    .catch((res) => {
      loading.value = false
    })
}
// 现冲
const orderList = () => {
  loading.value = true
  proxy
    .$post('/mt4/Order/orderList', page)
    .then((res) => {
      listdata.value = res.data
      loading.value = false
    })
    .catch((res) => {
      loading.value = false
    })
}
// 对比列表
const setmarketList = computed(() => {
  var getmarketlist = store.state.marketList
  var getlistdata = listdata.value
  if (FromType.value == 2 && getlistdata != null && getlistdata.length > 0) {
    for (let i = 0; i < getlistdata.length; i++) {
      var info = getlistdata[i]
      if (info.ostaus == '0' || info.ostaus == '2') {
        for (let k = 0; k < getmarketlist.length; k++) {
          if (info.pid === getmarketlist[k].id) {
            info.sellprice = getmarketlist[k].price
            break
          }
        }
      }
    }
  }
  return getlistdata
})
const setmarketGoodsList = computed(() => {
  let getmarketlist = store.state.marketGoodsList
  var getlistdata = listdata.value
  if (FromType.value == 1 && getlistdata != null && getlistdata.length > 0) {
    for (let i = 0; i < getlistdata.length; i++) {
      var info = getlistdata[i]
      if (info.ostaus == '0' || info.ostaus == '2') {
        for (let k = 0; k < getmarketlist.length; k++) {
          if (info.pid === getmarketlist[k].id) {
            info.sellprice = getmarketlist[k].price
            showGains(info)
            break
          }
        }
      }
    }
  }
  return getlistdata
})
const showGains = () => {
  var gains_str = ''
  if (info.ostaus == '2' || info.ostaus == '3') {
    gains_str = '0.00'
  } else {
    var gain = parseFloat(info.spotprice * info.mouthsum * (info.sellprice - info.buyprice))
    //  "ostyle": "0",  //0涨 1跌，
    if (gain == 0) {
      gains_str = '0.00'
    } else if (gain > 0) {
      if (info.ostyle == '0') {
        gains_str = '+' + Math.abs(gain).toFixed(2)
      } else {
        gains_str = '-' + Math.abs(gain).toFixed(2)
      }
    } else if (gain < 0) {
      if (info.ostyle == '0') {
        gains_str = '-' + Math.abs(gain).toFixed(2)
      } else {
        gains_str = '+' + Math.abs(gain).toFixed(2)
      }
    }
  }
  info.ploss = gains_str
}

onMounted(() => {
  proxy.$websocket.send(info) //发送
  if (FromType.value == 1) {
    orderGoodsList()
  } else {
    orderList()
  }
})
watch(
  () => marketList.value,
  (newValue, oldValue) => {
    // if (FromType.value == 1) {
    // 	GoDetailId.value=marketGoodsList.value[0].id
    // } else {
    // 	orderList()
    // 	GoDetailId.value=marketList.value[0].id
    // }

    if (newValue.length == 0) {
      ListLoading.value = true
    } else {
      ListLoading.value = false
    }
  }
)
</script>

<style scoped lang="scss">
@import '../../style/scss/price';
</style>
